<template>
  <div>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>姓名</th>
        <th>生日</th>
        <th>职位</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="em in cutBean.records" :key="em.id">
        <td>{{ em.name }}</td>
        <td>{{ em.birthday }}</td>
        <td>{{ em.job }}</td>
        <td>{{ em.status }}</td>
        <td><input type="button" v-if="em.status == '在职'" value="离职" @click="dismisson(em.id)"/>
          <input type="button" v-if="em.status == '在职'" value="修改" @click="findById(em.id)"/></td>
      </tr>
      </tbody>
    </table>
    <div>
      <input type="button" v-for="pg in cutBean.pages" :key="pg"
             :value="pg" style="margin-left: 10px" @click="findByItem(pg)">
    </div>
    <input type="button" value="添加" @click="isAddDiv = true"/>

    <div>
      姓名：<input type="text" v-model="findObj.name"><br>
      起始日期：<input type="text" v-model="findObj.startDate"><br>
      结束日期：<input type="text" v-model="findObj.endDate"><br>
      <input type="button" value="查询" @click="findByItem(1)"/>
    </div>


    <div class="dialogDiv" v-if="isUpdateDiv">
      <div class="contentDiv">
        <img :src="'/project/emImg/'+updateObj.face" width="200" height="200"><br>
        姓名：{{ updateObj.name }}<br>
        生日：{{ updateObj.birthday }}<br>
        职位：<input type="text" v-model="updateObj.job"><br>
        状态：{{ updateObj.status }}<br>
        <input type="button" value="修改" @click="updateEmployee">
      </div>
    </div>

    <div class="dialogDiv" v-if="isAddDiv">
      <div class="contentDiv">
        姓名：<input type="text" v-model="addObj.name"><br>
        生日：<input type="text" v-model="addObj.birthday"><br>
        职位：<input type="text" v-model="addObj.job"><br>
        头像：<input type="file" ref="faceFile"><br>
        <input type="button" value="添加" @click="addEmployee">
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Index from "@/Index";

export default {
  components: {Index},
  data() {
    return {
      cutBean: {}, //动态条件查询分页对象
      findObj: {}, //查询条件对象
      isUpdateDiv: false, //是否显示修改弹出框
      isAddDiv: false, //是否显示添加弹出框
      updateObj: {}, //修改对象
      addObj: {} //添加对象
    }
  },
  methods: {
    findByItem(pageNO) {//动态条件分页查询
      this.findObj.pageNO = pageNO;
      axios.get("/project/em/findByItem", {params: this.findObj})
          .then(resp => {
            this.cutBean = resp.data;
          })
    },
    dismisson(id) { //员工离职
      axios.get("/project/em/dimission", {params: {id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      })
    },
    findById(id) { //按ID查询
      this.isUpdateDiv = true;
      axios.get("/project/em/findById", {params: {id}}).then(resp => {
        this.updateObj = resp.data;
      });
    },
    updateEmployee() { //修改员工职位
      axios.get("/project/em/update", {params: this.updateObj}).then(resp => {
        if (resp.data == "ok") {
          this.isUpdateDiv = false;
          this.findByItem(1);
        }
      });
    },
    async addEmployee() {//添加员工
      //上传员工头像
      var emObj = new FormData();
      emObj.append("faceImg", this.$refs.faceFile.files[0]);

      //上传文件请求头
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      //接收服务器发送给客户端的上传文件名
      var face = "";
      await axios.post("/project/upload", emObj, config).then(resp => {
        face = resp.data;
      });

      //将上传文件名，添加到addObj对象中
      this.addObj.face = face;
      //向服务器发送请求，完成添加
      axios.get("/project/em/add", {params: this.addObj}).then(resp => {
            if (resp.data == "ok") {
              this.findByItem(1);
              this.isAddDiv = false;
            }
          }
      );
    }
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>
.dialogDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(255, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentDiv {
  width: 600px;
  height: 400px;
  padding: 20px;
  border: 2px solid #000;
  background: white;
}
</style>